<route lang="json5">
{
  style: {
    navigationBarTitleText: '新闻动态',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />

    <view class="search" :class="!pageData.mode ? 'circle-style' : ''">
      <wd-popover mode="menu" :content="menu" @menuclick="link">
        <view class="select">
          {{ pageData.mode ? '日期搜索' : '关键字搜索' }}&ensp;
          <wd-icon name="arrow-down" />
        </view>
      </wd-popover>
      <!-- 关键字搜索 -->
      <input
        v-if="pageData.mode === 0"
        v-model="pageData.keyword"
        placeholder="请输入关键字搜索"
        style="margin-left: 25rpx; color: #264a75; font-size: small; width: 400rpx"
      />
      <view
        v-if="pageData.mode === 0"
        style="width: 60rpx; height: 60rpx; padding-top: 12rpx"
        @click="handleSearch"
      >
        <image
          style="width: 35rpx; height: 35rpx"
          src="@/static/images/icons/icon_newsSearch.png"
        />
      </view>
      <!-- 日期搜索 -->
      <view v-if="pageData.mode === 1" class="circle-style-2" @click="openCalendar(1)">
        <input v-model="pageData.from_f" placeholder="年-月-日" />
      </view>
      <view v-if="pageData.mode === 1" style="color: #264a75; font-size: small">至</view>
      <view v-if="pageData.mode === 1" class="circle-style-2" @click="openCalendar(2)">
        <input v-model="pageData.to_f" placeholder="年-月-日" />
      </view>
      <view
        v-if="pageData.mode === 1"
        class="circle-style-2"
        style="width: 100rpx; justify-content: center"
        @click="handleSearch"
      >
        查询
      </view>
    </view>
    <view style="position: absolute; top: -10000px">
      <wd-calendar
        ref="calendar_1"
        :with-cell="true"
        v-model="pageData.from"
        @confirm="handleConfirm1"
      />
      <wd-calendar
        ref="calendar_2"
        :with-cell="true"
        v-model="pageData.to"
        @confirm="handleConfirm2"
      />
    </view>
    <scroll-view
      class="content"
      scroll-y="true"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
      @scrolltolower="loadMoreData"
    >
      <!-- 空显示 -->
      <view
        v-if="pageData.newsList.length === 0"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <image src="/static/images/icons/imgNone.png" style="width: 309rpx; height: 259rpx"></image>
      </view>
      <!-- 新闻列表 -->
      <view v-for="(item, index) in pageData.newsList" :key="index" @click="navToRichText(item)">
        <NewsItem :news="item" />
      </view>
      <!-- 加载中，到底啦横幅 -->
      <view
        style="margin-top: 30rpx; padding-bottom: 50rpx"
        v-if="!(pageData.newsList.length === 0)"
      >
        <wd-divider color="black">{{ pageData.loading ? '加载中...' : '已经到底了' }}</wd-divider>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { newsList } from '@/service/news/news'
import NewsItem from '@/components/NewsItem/NewsItem.vue'
import { listBg } from '@/static/imgMap'

const calendar_1 = ref()
const calendar_2 = ref()
const menu = ref([
  {
    id: 0,
    content: '关键字搜索',
  },
  {
    id: 1,
    content: '日期搜索',
  },
])
const pageData = reactive({
  mode: 0,
  keyword: '',
  from: 0, // 时间戳格式
  from_f: null, // 年月日格式
  to: 0,
  to_f: null,
  div2Height: 0,
  newsList: [],
  loading: false,
  page: 1,
  limit: 10,
  totalCount: 0,
})

const link = (e) => {
  pageData.mode = e.item.id
}
const navToRichText = (data) => {
  uni.navigateTo({
    url: '/pages-sub/myNews/newsRichText?data=' + encodeURIComponent(JSON.stringify(data)),
  })
}
const openCalendar = (index) => {
  if (index === 1) calendar_1.value?.open()
  if (index === 2) calendar_2.value?.open()
}

const handleConfirm1 = () => {
  const date = new Date(pageData.from)
  pageData.from_f = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}

const handleConfirm2 = () => {
  const date = new Date(pageData.to)
  pageData.to_f = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}

const fetchNewsList = async () => {
  pageData.loading = true
  try {
    const response = await newsList({
      Title: pageData.keyword,
      page: pageData.page,
      limit: pageData.limit,
    })
    pageData.newsList = response.data.items
    pageData.totalCount = response.data.totalCount
    pageData.page += 1
  } catch (error) {
    console.error('Error fetching news list:', error)
  } finally {
    pageData.loading = false
  }
}

const loadMoreData = async () => {
  if (pageData.loading || pageData.totalCount <= pageData.newsList.length) {
    return
  }

  pageData.loading = true

  try {
    const response = await newsList({
      Title: pageData.keyword,
      page: pageData.page,
      limit: pageData.limit,
    })
    pageData.newsList.push(...response.data.items)
    pageData.page += 1
  } catch (error) {
    console.error('Error loading more data:', error)
  } finally {
    pageData.loading = false
  }
}

const handleSearch = () => {
  pageData.page = 1
  pageData.newsList = []
  fetchNewsList()
}

onMounted(() => {
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.search')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
  fetchNewsList()
})
</script>

<style scoped lang="scss">
.entire {
  width: 100%;
  .search {
    width: 710rpx;
    height: 60rpx;
    margin-top: 10rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    .select {
      width: 220rpx;
      height: 60rpx;
      border-radius: 30rpx;
      background-color: $uni-color-primary;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: small;
      color: $uni-text-color-inverse;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 900rpx;
    overflow-y: scroll;
  }
  .circle-style {
    border-radius: 30rpx;
    border-color: $uni-color-primary;
    border-style: solid;
    border-width: 4rpx;
    box-sizing: border-box;
  }

  .circle-style-2 {
    width: 180rpx;
    height: 60rpx;
    border-radius: 30rpx;
    border-color: $uni-color-primary;
    border-style: solid;
    border-width: 4rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    font-size: small;
    color: $uni-color-primary;
  }
}
</style>
